<template>
	<view class="content">
		<home-nav></home-nav>
		<!-- swiper点插件 -->
		<uni-swiper-dot :info="banner" :current="current">
			<!-- swiper -->
			<swiper class="banner" @change="changeDot" circular="true">
				<swiper-item v-for="(item ,index) in  bannerList[0]" :key="index">
					<view class="swiper-item">
						<image mode="aspectFill" :src="item.backgroundImage.url"></image>
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<!-- 推荐 -->
		<view class="recommend">
			<view class="title">你想在哪使用投影仪</view>
			<scroll-view class="scroll-view_H" scroll-x="true">
				<navigator class="scene" url="" v-for="(item,index) in recommend[0]" :key="index">
					<image :src="item.image.url" mode="aspectFill"></image>
					<view class="text">{{item.text}}</view>
				</navigator>
			</scroll-view>
		</view>
		<view>
			<home-category></home-category>
		</view>
	</view>
</template>

<script setup>
	import {
		GetNewProduct, // 获取到banner
		GetComer, // 获取推荐
		GetHomeCategoryList, // 获取首页列表
	} from "../../api/auth.js"
	// 导入ref
	import {
		ref,
		reactive
	} from "vue"
	// ------定义数据--------------------------------------------------------------------------------
	const bannerList = reactive([]); //banner数据
	const current = ref(0); //幻灯片第n页
	const recommend = reactive([]); //推荐
	const homeCategory = reactive([]); //首页分类
	// ------定义数据--------------------------------------------------------------------------------
	// 获取banner
	GetNewProduct()
		.then(res => {
			console.log("主页数据", res.data)
			bannerList.push(res.data)
			console.log("主页数据", bannerList[0])
		})
	// 推荐
	GetComer()
		.then(res => {
			recommend.push(res.data)
		})
		.catch(err => console.log(err, "err"))
	// 首页分类
	GetHomeCategoryList()
		.then(res => {
			console.log("首页分类", res)
			homeCategory.push(res.data)
		})
	// swiper 发生变化时候更新current
	function changeDot(e) {
		current.value = e.detail.current;
	}
</script>

<style lang="scss">
	.banner {
		margin: 0 $uni-spacing-row-base;
		height: 1000rpx;
		border-radius: $uni-border-radius-lg;
		overflow: hidden;

		.swiper-item {
			height: 1000rpx;
			width: 100%;

			image {
				height: 1000rpx;
				width: 100%;
			}
		}
	}

	// 推荐
	.recommend {
		width: 100%;
		// overflow: hidden;
		margin-top: $uni-spacing-row-base;

		.title {
			font-size: $uni-font-size-sm*1.5;
			padding: $uni-spacing-row-base;
		}

		.scroll-view_H {
			white-space: nowrap;
			padding: 0 $uni-spacing-row-base;


		}

		.scene {
			width: 280rpx;
			height: 400rpx;
			border-radius: $uni-border-radius-lg;
			overflow: hidden;
			margin-right: $uni-spacing-row-base;
			display: inline-block;
			position: relative;

			image {
				width: 280rpx;
				height: 400rpx;
			}

			.text {
				position: absolute;
				left: 30rpx;
				bottom: 30rpx;
				color: #fff
			}

		}
	}
</style>